<template>
  <div>
    <el-table
      :data="tableData" style="width: 100%">
      <el-table-column prop="sn" label="部门编号" width="180">
      </el-table-column>
      <el-table-column prop="name" label="部门名" width="180">
      </el-table-column>
      <el-table-column prop="dirPath" label="部门状态">
      </el-table-column>
      <!--    操作-->
      <el-table-column label="操作">
        <template slot-scope="scope">
          <el-button
            size="mini"
            @click="handleEdit(scope.$index, scope.row)">编辑
          </el-button>
          <el-button
            size="mini"
            type="danger"
            @click="handleDelete(scope.$index, scope.row)">删除
          </el-button>
        </template>
      </el-table-column>
    </el-table>
    <!--    分页头-->
    <div class="block">
      <span class="demonstration"></span>
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="currentPage"
        :page-sizes="[10, 20, 30, 40]"
        :page-size="pageSize"
        layout="total, sizes, prev, pager, next"
        :total="totals">
      </el-pagination>
    </div>
    <!--    分页尾-->
  </div>
</template>

<script>
export default {
  name: "DepShow",
  data() {
    return {
      tableData: [],

      //  分页
      currentPage: 1,
      pageSize: 10,
      totals: 0
    }
  },
  methods: {
    //展示
    showTableData() {
      this.$http.post("http://localhost:80/dep/showDeps", {
        pageSize: this.pageSize,
        currentPage: this.currentPage
      }).then((rep) => {
        // console.debug(rep.data.deps)
        this.tableData = rep.data.deps
        this.totals = rep.data.totals
      })
    },

    handleEdit(index, row) {
      console.log(index, row);
    },
    //删除
    handleDelete(index, row) {
      // console.log(index, row);
      // console.debug(row.id)
      let rid = row.id
      this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.$http.post("http://localhost:80/dep/del", {id:rid}).then((rep) => {
          // console.debug(rep)
          if (rep.data.success) {
            this.$message({
              type: 'info',
              message: '删除成功'
            })
            this.showTableData()//刷新
          } else {
            this.$message({
              type: 'info',
              message: rep.data.msg
            })
          }
        })
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        });
      });

    },
    //分页
    handleSizeChange(val) {
      this.pageSize = val;
      this.showTableData()//刷新
    },
    handleCurrentChange(val) {
      this.currentPage = val;
      this.showTableData()//刷新
    }

  },
  mounted() { //页面加载之前，数据得到
    this.showTableData();
  }

}
</script>

<style scoped>

</style>
